<template>
  <div style="height: 4rem;">
    <el-form label-width="100px" :model="dialogModel" :rules="rules">
      <el-form-item label="车牌号：" prop="plateNumber">
        <el-input v-model="dialogModel.plateNumber" style="width: 249px" :disabled="inputdisabled"></el-input>
      </el-form-item>
    </el-form>
    <el-form label-width="120px" :model="dialogModel" :rules="rules">
      <el-form-item label="黑名单期限：" prop="resource">
        <el-radio-group v-model="dialogModel.resource" @change="changeTimeRadio(dialogModel.resource)">
          <el-radio label="1周"></el-radio>
          <el-radio label="1月"></el-radio>
          <el-radio label="1年"></el-radio>
          <el-radio label="永久"></el-radio>
          <el-radio label="自定义"></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-form label-width="100px" :model="dialogModel" :rules="rules" class="form1">
      <el-form-item label="有效期起：" prop="validFrom">
        <el-date-picker v-model="dialogModel.validFrom" type="date" placeholder="选择日期" @change="changeStartTime">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="有效期止：" prop="expiryDate">
        <el-date-picker v-model="dialogModel.expiryDate" type="date" placeholder="选择日期" @change="changeEndTime">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="原因：" prop="reason">
        <el-input v-model="dialogModel.remake" style="width: 400px"></el-input>
      </el-form-item>
    </el-form>
    <div style="margin-top: -1rem; margin-left: 2rem;">
      <el-button type="primary" @click="dialogDetermine">提 交</el-button>
      <el-button style="margin-top:1rem;" @click="back">取 消</el-button>
    </div>
  </div>
</template>
<script>
import { inserApiBlack } from "@/api/Blacklist";
export default {
  name: "insertBlackList",
  props: ['plateNumber'],
  data() {
    return {
      plateNumber1: this.plateNumber,
      dialogModel: {
        plateNumber: "",
        validFrom: "",
        expiryDate: "",
        remake: "",
      },
      inputdisabled: false,
      multipleSelection: [],
      validFrom: "",
      expiryDate: "",
      carJurisdictionData: {},
      rules: {
        plateNumber: [{ required: true, message: '请输入车牌号', trigger: 'blur' }],
        validFrom: [{ required: true, message: '请选择有效期起', trigger: 'blur' }],
        expiryDate: [{ required: true, message: '请选择有效期止', trigger: 'blur' }],
        resource: [{ required: true, message: '请选择有效期止', trigger: 'blur' }],
        reason: [{ required: true, message: '请填写原因', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.initBlackDate();
    if (typeof this.plateNumber1 != 'undefined') {
      this.dialogModel.plateNumber = this.plateNumber1;
      this.inputdisabled = true;
    }
  },
  methods: {
    initBlackDate() {
      this.dialogModel.resource = "永久"
      const end = new Date();
      const start = new Date();
      end.setTime(end.getTime() + 3600 * 1000 * 24 * 36500);
      this.dialogModel.validFrom = start;
      this.dialogModel.expiryDate = end;
      this.validFrom = start;
      this.expiryDate = end;
    },
    dialogDetermine() {
      let data = {
        plateNumber: this.dialogModel.plateNumber,
        sourceType: 0,
        reason: this.dialogModel.remake,
        timeValidityType: this.carJurisdictionData.timeValidityType,
        startTime: this.dialogModel.validFrom,
        endTime: this.dialogModel.expiryDate
      };
      if (data.plateNumber.length == 0) return this.$message.error('车牌号不能为空！');
      if (data.startTime.length == 0) return this.$message.error('有效期起不能为空');
      if (data.endTime.length == 0) return this.$message.error('有效期止不能为空！');
      if (data.reason.length == 0) return this.$message.error('请填写原因！');
      inserApiBlack(data).then(res => {
        if (!res.error) {
          this.initInsertData();
          this.$emit('backMain');
          this.$message({
            message: '添加成功，正在刷新！',
            type: 'success'
          });
        }
        // this.$parent.backMain();
      });
    },
    changeTimeRadio(items) {
      console.log(items);
      if (items == "1周") {
        const end = new Date();
        const start = new Date();
        end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
        this.dialogModel.validFrom = start;
        this.dialogModel.expiryDate = end;
        this.validFrom = start;
        this.expiryDate = end;
        this.carJurisdictionData.timeValidityType = 2;
      }
      else if (items == "1月") {
        const end = new Date();
        const start = new Date();
        end.setTime(end.getTime() + 3600 * 1000 * 24 * 30);
        this.dialogModel.validFrom = start;
        this.dialogModel.expiryDate = end;
        this.validFrom = start;
        this.expiryDate = end;
        this.carJurisdictionData.timeValidityType = 3;
      }
      else if (items == "1年") {
        const end = new Date();
        const start = new Date();
        end.setTime(end.getTime() + 3600 * 1000 * 24 * 365);
        this.dialogModel.validFrom = start;
        this.dialogModel.expiryDate = end;
        this.validFrom = start;
        this.expiryDate = end;
        this.carJurisdictionData.timeValidityType = 4;
      }
      else if (items == "永久") {
        const end = new Date();
        const start = new Date();
        end.setTime(end.getTime() + 3600 * 1000 * 24 * 36500);
        this.dialogModel.validFrom = start;
        this.dialogModel.expiryDate = end;
        this.validFrom = start;
        this.expiryDate = end;

      } else {
        this.carJurisdictionData.timeValidityType = 99;
      }
    },
    changeStartTime(v) {
      if (this.validFrom.length == 0) {
        this.validFrom = v;
        this.dialogModel.resource = "自定义"
      }
      let startDate = new Date(this.validFrom)
      if (String(startDate).substring(0, 15) != String(v).substring(0, 15)) {
        this.dialogModel.resource = "自定义"
      }
    },
    changeEndTime(v) {
      if (this.expiryDate.length == 0) {
        this.expiryDate = v;
        this.dialogModel.resource = "自定义"
      }
      let endDate = new Date(this.expiryDate)
      if (String(endDate).substring(0, 15) != String(v).substring(0, 15)) {
        this.dialogModel.resource = "自定义"
      }
    },
    back() {
      this.initInsertData();
      this.$emit('backMain');
    },
    initInsertData() {
      this.dialogModel = {
        plateNumber: "",
        validFrom: "",
        expiryDate: "",
        remake: "",
      }
    }
  }
}

</script>
<style lang="scss" scoped>
.main {
  margin: 0.2rem;
  padding: 0.2rem;
}

#selectForm>>>.el-form-item__label {
  font-size: 12px;
}

.search-bar {
  margin-bottom: .2rem;
  text-align: left;
  float: left;
  margin-left: .6rem;
  margin-top: .9rem;
}

.form-span {
  font-size: 18px;
  ;
}

.block {
  margin-left: 20px;
  margin-right: .2rem;
  float: right;
}

.move-right {
  margin-left: .5rem;
}
</style>